<template>
  <div class="aui-card-list">
  <uni-list-query-card :queryShow="queryShow" @query-click="getDataList()" @click="(e)=>{this.queryShow=e}" @searchReset="searchReset()">
   <el-col :span="6">
        <el-form-item :label="$t('user.username')">
          <el-input v-model="dataForm.username" :placeholder="$t('user.username')" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item :label="$t('user.realName')">
          <el-input v-model="dataForm.realName" :placeholder="$t('user.realName')" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
       <el-form-item :label="$t('user.userType')">
        <el-select v-model="dataForm.userType" :placeholder="$t('user.userType')" clearable>
              <el-option v-for="template in this.$getDictList('SYS_USER_TYPE', false)" :key="template.val"
                :label="template.label" :value="template.val"></el-option>
            </el-select>
       </el-form-item>
      </el-col>
  </uni-list-query-card>
    <el-card shadow="never" class="aui-card-list-body">
      <vxe-toolbar :setting="{immediate:true}">
        <template v-slot:buttons>
          <el-button v-if="$hasPermission('sys:user:save')" type="primary" @click="addOrUpdateHandle()">{{
            $t('add') }}
          </el-button>
          <el-button v-if="$hasPermission('sys:user:delete')" type="danger" @click="deleteHandle()">{{
            $t('deleteBatch') }}
          </el-button>
        </template>
        <template v-slot:tools>
          <el-button icon="el-icon-refresh" @click="getDataList()" circle></el-button>
          <el-dropdown trigger="click" style="padding-left: 5px;" placement="bottom">
            <el-button icon="el-icon-download" circle>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-bottom" @click.native="exportHandle(true)">导出当前页</el-dropdown-item>
              <el-dropdown-item icon="el-icon-download" @click.native="exportHandle()">全部导出
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </vxe-toolbar>
      <vxe-table :loading="dataListLoading" :data="dataList" ref="xTable" auto-resize class="vxe-table-element"
        remote-sort @sort-change="dataListSortChangeHandle" @select-change="dataListSelectionChangeHandleVex"
        @select-all="dataListSelectionAllChangeHandleVex">
        <vxe-table-column type="checkbox" width="50" align="center"></vxe-table-column>
        <vxe-table-column field="username" title="user.username" sortable width="150" :show-overflow="true">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
            <i v-if="scope.row.superAdmin.toString() == '2'" class="icon_user_admin">
              <el-tag type="success" size="mini" effect="dark">管理员</el-tag>
            </i>
            <i v-if="scope.row.superAdmin.toString() == '1'" class="el-icon-bell icon_user_admin">
            </i>
          </template>
        </vxe-table-column>
        <vxe-table-column field="realName" title="user.realName" width="auto" align="center"></vxe-table-column>
        <vxe-table-column field="deptName" title="user.deptName" width="auto" align="center"></vxe-table-column>
        <vxe-table-column field="mobile" title="user.mobile" sortable width="auto" align="center"></vxe-table-column>
        <vxe-table-column field="email" title="user.email" width="auto"></vxe-table-column>
        <vxe-table-column field="status" title="user.status" sortable width="80" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0" size="small" type="danger">{{ $t('user.status0') }}</el-tag>
            <el-tag v-else size="small" type="success">{{ $t('user.status1') }}</el-tag>
          </template>
        </vxe-table-column>
        <vxe-table-column field="createDate" title="user.createDate" sortable width="140" align="center">
        </vxe-table-column>
        <vxe-table-column title="handle" width="200" align="center" :show-overflow="false">
          <template slot-scope="scope">
            <el-button v-if="$hasPermission('sys:user:update')" type="text" icon="el-icon-edit" size="small"
              @click="addOrUpdateHandle(scope.row.id)">{{$t('update')}}
            </el-button>
            <el-button v-if="$hasPermission('sys:user:delete')" type="text" icon="el-icon-delete" size="small"
              @click="deleteHandle(scope.row.id)">{{
              $t('delete') }}
            </el-button>
            <el-divider direction="vertical"></el-divider>
            <el-dropdown>
              <span class="el-button el-button--text el-button--small">
                {{ $t('more')}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button v-if="$hasPermission('sys:user:secAdmin')" type="text" icon="el-icon-s-flag" size="small"
                    @click="openSecAdmin(scope.row.id)">{{$t('user.secOpter')}}
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button v-if="$hasPermission('sys:sysUserCustrule:genList')" type="text" icon="el-icon-s-promotion"
                    size="small" @click="openUserDataScope(scope.row.id)">{{$t('user.userDataScope')}}
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button v-if="$hasPermission('sys:user:update')" type="text" icon="el-icon-refresh" size="small"
                    @click="resetPassword(scope.row.id)">{{$t('user.resetPassword')}}
                  </el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </vxe-table-column>
      </vxe-table>
      <el-pagination :current-page="page" :page-sizes="[5, 10, 20, 50, 100]" :page-size="limit" :total="total"
        layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      <SecAdmin v-if="secAdminVisible" ref="secAdmin" @refreshDataList="getDataList"></SecAdmin>
      <UserDataScope :readOnly="false" v-if="userDataScopeVisible" ref="userDataScope"></UserDataScope>
    </el-card>
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './out-user-add-or-update'
import SecAdmin from './user-sec-admin'
import UserDataScope from './user-datascope'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      secAdminVisible: false,
      userDataScopeVisible: false,
      mixinViewModuleOptions: {
        // exportURLVxe: '/sys/user/list',
        getDataListURL: '/sys/user/page',
        getDataListIsPage: true,
        deleteURL: '/sys/user',
        deleteIsBatch: true,
        exportURL: '/sys/user/export'
      },
      dataForm: {
        username: '',
        realName: '',
        userTypeFlag: 'out'
      }
    }
  },
  components: {
    AddOrUpdate,
    SecAdmin,
    UserDataScope
  },
  methods: {
    openSecAdmin (id) {
      this.secAdminVisible = true
      this.$nextTick(() => {
        this.$refs.secAdmin.secForm.id = id
        this.$refs.secAdmin.init()
      })
    },
    openUserDataScope (id) {
      this.userDataScopeVisible = true
      this.$nextTick(() => {
        this.$refs.userDataScope.userId = id
        this.$refs.userDataScope.init()
      })
    },
    resetPassword (id) {
      this.$confirm('确认将该用户密码重置为初始密码？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http['put'](`/sys/user/resetPassword/${id}`, null).then(({ data: res }) => {
          if (res.code !== 0) {
            return
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            onClose: () => {
              this.$emit('refreshDataList')
            }
          })
        }).catch(() => { })
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    }
  }
}
</script>

<style scoped>
.el-tag--mini {
  margin: 0 2px;
  padding: 0 2px;
  font-size: 10px;
  height: 18px;
  line-height: 18px;
}
</style>
